<template>
  <el-card style="overflow-y:auto;overflow-x:hidden;">
    <div slot="header" class="clearfix">
      <el-row>
        <el-col :span=8>
          <span>届别</span>
          <el-tag
            style="margin-bottom: -5px;"
            v-show="title"
            effect="dark">
            {{ title }}
          </el-tag>
        </el-col>
        <el-col :span=16 align="right">
          <el-radio-group v-model="active">
            <el-radio-button v-show="title" size="mini" label="1" border>当前届别</el-radio-button>
            <el-radio-button v-show="title" size="mini" label="0" border>历史届别</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        @cell-click="sessionHandle"
        :height="tableHeight"
        :max-height="tableHeight"
        :data="data"
        :cell-style="()=>{return 'color: #0EA5E9;'}"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          prop="gradeShowWithClazzCount"
          label="届别">
        </el-table-column>
        <el-table-column
          align="center"
          prop="chargerName"
          label="组长">
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "SessionForm",
  props: {
    data: Array,
    title: String,
  },
  data() {
    return {
      active: '1',
      tableHeight: window.innerHeight - 220,
    }
  },
  methods: {
    sessionHandle(row, column) {
      if (column.label == "届别") {
        this.$emit('session-clazz', row)
      } else if (column.label == "组长") {
        console.log(row)
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-radio-button--small .el-radio-button__inner {
  margin-bottom: -15px;
  margin-top: -15px;
  padding: 8px 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
}

.clearfix:after {
  clear: both
}

.el-button + .el-button {
  margin-left: 0px;
}
</style>
